<script>
import _ from 'lodash'
import dataObjectConf from '../data-object-conf.js'
import { getUiItemDataObject, generateOperateButtons, buttonAssociationHandler, getIdentificationDataObject } from '../mixins.js'

const getButtonDataObject = (setting = {}, editable, context) => {
  let event = setting.options.event
  return _.merge({}, dataObjectConf, {
    props: {
      type: setting.options.buttonType,
      // shape: setting.options.buttonShape,
      size: setting.options.buttonSize,
      disabled: setting.options.disabled,
    },
    style: {
      display: 'block',
    },
    on: {
      'click': () => {
        for(let i = 0; i < event.length; i++){
          if(event[i].value[1].value === 'click'){
            buttonAssociationHandler(context, event[i])
          }
        }
      }
    }
  })
}

export default {
  name: 'ButtonAdapter',
  props: [
    'setting',
    'editable',
    'markSelect',
    'selected'
  ],
  functional: true,
  render (h, context) {
    const editable = context.props.editable
    const markSelect = context.props.markSelect
    const extra = editable ? generateOperateButtons(h, context) : []
    const mark = markSelect ? getIdentificationDataObject(h, context) : []
    return h('FormItem', getUiItemDataObject(context), [
      ...mark,
      h('Button', getButtonDataObject(context.props.setting, editable, context), context.props.setting.options.defaultValue),
      ...extra,
    ])

  }
}
</script>
